<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div>

    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="demoTable">
                <div class="layui-inline">
                    <input class="layui-input" name="deviceName" id="demoReload" placeholder="设备名称">
                </div>

                <div class="layui-inline">
                    <select class="layui-inline" name="deviceStatus" id="demoReload02" style="display: inline-block;height: 35px">
                        <option value="" selected>请选择状态</option>
                        <option value="1">在库</option>
                        <option value="2">报废</option>
                        <option value="3">借出</option>
                    </select>
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-hide" id="devicetab" lay-filter="devicetab"></table>
        </div>
    </div>
</div>

<!--头工具-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="setStatus">报废</button>
        <button class="layui-btn layui-btn-sm" lay-event="inkStatus">在库</button>
        <button class="layui-btn layui-btn-sm" lay-event="lendStatus">借出</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteMul">删除</button>
    </div>
</script>

<!--行工具-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table','form'], function() {
            //引入模块
            var table = layui.table;
            var form = layui.form;

        //搜索框
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var demoReload02 = $('#demoReload02');

                //执行重载
                table.reload('testReload', {
                    url:"/device/deviceSelectDim"
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                            deviceName: demoReload.val()
                            ,deviceStatus: demoReload02.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //触发头工具栏的事件 classroomtab表格id
        table.on('toolbar(devicetab)', function(obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            console.log(checkStatus.date);
            switch (obj.event) {
                //获取单元格数据
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                //新增
                case 'getData':

                    form.val('myform03', {
                        "deviceId": ""
                        , "deviceCoding": ""
                        , "deviceName": "" // "name": "value"
                        , "deviceType": ""
                        , "deviceStatus": ""
                        , "deviceDate": ""
                    });
                    form.on('submit(frmsub)', function (data) {
                        var da = data.field;
                        let url = $("#myform03").attr("action", '/deviceInsert');
                        $.ajax({
                            url: '/device/deviceInsert'
                            , data: JSON.stringify(da)
                            , type: 'post'//get查/post增/delete删/put改
                            , dataType: 'json'
                            , contentType: 'application/json'
                            , success: function (data) {
                                if (data.code == 0) {
                                    alert("新增成功");
                                    //重写打开表格
                                    table.reload("testReload");
                                    //关闭弹出层
                                    layer.close(xlayer)
                                } else if (data.code) {
                                    alert("新增失败");
                                    //关闭弹出层
                                    layer.close(zlayer)
                                }
                            }
                        });
                        return false;
                    });

                    //弹出层
                    zlayer=layer.open({
                        title: '新设备信息',//弹出层名称
                        type: 1,
                        area: ['60%', '80%'],
                        content: $("#popups03"),//关联弹出层
                        shade: 0,//遮罩(透明度)为0
                    });
                    break;
                    //借出状态
                    case 'lendStatus':
                        var data = checkStatus.data;
                        var idList = new Array();
                        for (let i = 0; i < data.length; i++) {
                            idList.push(data[i].deviceId)
                        }
                        // layer.alert(layui.util.escape(JSON.stringify(idList)));
                        $.ajax({
                            url:'/device/deviceUpdateStatusMul'
                            ,data:JSON.stringify({
                                deviceIds:idList,
                                deviceStatus:3
                            })
                            ,type:'put'//get查/post增/delete删/put改
                            ,dataType:'json'
                            ,contentType:'application/json'
                            ,success:function (data) {
                                if(data.code==0){
                                    alert("借出申请成功")
                                    //重写打开表格
                                    table.reload("testReload")
                                }else if(data.code){
                                    alert("借出申请失败")
                                }
                            }
                        });
                        return false;
                        break;
                    //报废状态
                    case 'setStatus':
                        var data = checkStatus.data;
                        var idList = new Array();
                        for (let i = 0; i < data.length; i++) {
                            idList.push(data[i].deviceId)
                        }
                        // layer.alert(layui.util.escape(JSON.stringify(idList)));
                        $.ajax({
                            url:'/device/deviceUpdateStatusMul'
                            ,data:JSON.stringify({
                                deviceIds:idList,
                                deviceStatus:2
                            })
                            ,type:'put'//get查/post增/delete删/put改
                            ,dataType:'json'
                            ,contentType:'application/json'
                            ,success:function (data) {
                                if(data.code==0){
                                    alert("报废申请成功")
                                    //重写打开表格
                                    table.reload("testReload")
                                }else if(data.code){
                                    alert("报废申请失败")
                                }
                            }
                        });
                        return false;
                        break;
                    //在库状态
                    case 'inkStatus':
                        var data = checkStatus.data;
                        var idList = new Array();
                        for (let i = 0; i < data.length; i++) {
                            idList.push(data[i].deviceId)
                        }
                        // layer.alert(layui.util.escape(JSON.stringify(idList)));
                        $.ajax({
                            url:'/device/deviceUpdateStatusMul'
                            ,data:JSON.stringify({
                                deviceIds:idList,
                                deviceStatus:1
                            })
                            ,type:'put'//get查/post增/delete删/put改
                            ,dataType:'json'
                            ,contentType:'application/json'
                            ,success:function (data) {
                                if(data.code==0){
                                    alert("在库申请成功")
                                    //重写打开表格
                                    table.reload("testReload")
                                }else if(data.code){
                                    alert("在库申请失败")
                                }
                            }
                        });
                        return false;
                        break;
                //删除
                case 'deleteMul':
                    var data = checkStatus.data;
                    var idList = new Array();
                    for (let i = 0; i < data.length; i++) {
                        idList.push(data[i].deviceId)
                    }
                    // layer.alert(layui.util.escape(JSON.stringify(idList)));
                    $.ajax({
                        url:'/device/deviceDeleteMul'
                        ,data:JSON.stringify({
                            deviceIds:idList
                        })
                        ,type:'delete'//get查/post增/delete删/put改
                        ,dataType:'json'
                        ,contentType:'application/json'
                        ,success:function (data) {
                            if(data.code==0){
                                alert("删除成功")
                                //重写打开表格
                                table.reload("testReload")
                            }else if(data.code){
                                alert("删除失败")
                            }
                        }
                    });
                    return false;
                    break;
            }
        });

        //触发单元格行工具事件
        table.on('tool(devicetab)', function(obj){ // 双击 toolDouble
            var data = obj.data;//获取当前行的数据
            //console.log(obj);
            if(obj.event === 'del'){
                layer.confirm('确定删除当前设备信息?', function(index){
                    // layer.msg(JSON.stringify({deviceId:data.deviceId}));
                    var dd={deviceId:data.deviceId};
                    $.ajax({
                        url:"/device/deviceDeleteOne"
                        ,data:JSON.stringify(dd)
                        ,type:'delete'//get查/post增/delete删/put改
                        ,dataType:'json'
                        ,contentType:'application/json'
                        ,success:function (data){
                            if(data.code==0){
                                alert("删除成功");
                                // obj.del();//在页面删除
                                //重写打开表格
                                table.reload("testReload");
                            }else if(data.code){
                                alert("删除失败")
                            }
                        }
                    });
                    layer.close(index);
                });
                //修改
            } else if(obj.event === 'update'){
                //表单赋值,弹出层lay-filter的值
                form.val('myform',{
                    "deviceId":data.deviceId
                    ,"deviceCoding": data.deviceCoding
                    ,"deviceName": data.deviceName // "name": "value"
                    ,"deviceType":  data.deviceType
                    ,"deviceStatus":  data.deviceStatus
                    ,"deviceDate":  data.deviceDate
                });
                form.on('submit(frmsub)',function(data){
                    var da=data.field;
                    let url=$("#myform").attr("action",'/device/deviceUpdate');
                    $.ajax({
                        url:'/device/deviceUpdate'
                        ,data:JSON.stringify(da)
                        ,type:'put'//get查/post增/delete删/put改
                        ,dataType:'json'
                        ,contentType:'application/json'
                        ,success:function (data) {
                            if(data.code==0){
                                alert("修改成功");
                                //重写打开表格
                                table.reload("testReload");
                                layer.close(zlayer);
                            }else if(data.code){
                                alert("修改失败");
                                layer.close(zlayer);
                            }
                        }
                    });
                    return false;
                });
                //弹出层
                xlayer=layer.open({
                    title: '修改设备信息',//弹出层名称
                    type: 1,
                    area: ['40%','80%'],
                    content: $("#popups"),//关联弹出层
                    shade:0 ,//遮罩(透明度)为0
                });
                layer.close()
                //查看
            }else if(obj.event === 'edit'){
                //表单赋值,弹出层lay-filter的值
                form.val('myform02',{
                    "deviceId":data.deviceId
                    ,"deviceCoding": data.deviceCoding
                    ,"deviceName": data.deviceName // "name": "value"
                    ,"deviceType":  data.deviceType
                    ,"deviceStatus":  data.deviceStatus
                    ,"deviceDate":  data.deviceDate
                });


                //弹出层
                layer.open({
                    title: '查看设备信息',//弹出层名称
                    type: 1,
                    area: ['40%','80%'],
                    content: $("#popups02"),//关联弹出层
                    shade:0 ,//遮罩(透明度)为0
                });
            }
        });


        // 表格渲染实例
        table.render({
            elem: '#devicetab'
            , url: '/device/deviceSelectAll' // 此处为静态模拟数据，实际使用时需换成真实接口
            , toolbar: '#toolbarDemo'
            //右侧图标功能
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '帮助'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , height: '600px' // 最大高度减去其他容器已占有的高度差
            , cellMinWidth: 80
            , page: true
            //渲染表格加id实现搜索功能
            ,id: 'testReload'
            ,limit:50
            , limits:[10,20,30,40,50]
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'deviceId', title: '序号', sort: true}
                , {field: 'deviceCoding', title: '设备编号', sort: true}
                , {field: 'deviceName', title: '设备名称'}
                , {field: 'deviceType', title: '设备类型', sort: true}
                , {field: 'deviceStatus', title: '状态',templet:function (data){
                        if(data.deviceStatus==1)
                            return '<span style="color: #00FF00">在库</span>';
                        else if(data.deviceStatus==2){
                            return '<span style="color: red">报废</span>';
                        }else if(data.deviceStatus==3){
                            return '<span style="color:cyan">借出</span>';
                        }
                    }}
                , {field: 'deviceDate',type:"data", title: '登记时间', sort: true}
                , {fixed: 'right', title: '操作', minWidth: 200, toolbar: '#barDemo'}
            ]]
        });


    });

</script>

<!--新增弹出层-->
<div style="padding: 16px;display:none" id="popups03" >
    <form class="layui-form" action="" id="myform03" lay-filter="myform03">

        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label" style="width: auto">设备序号</label>
            <div class="layui-input-block">
                <input type="text" name="deviceId" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备编号</label>
            <div class="layui-input-block">
                <input type="text" name="deviceCoding" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备名称</label>
            <div class="layui-input-block">
                <input type="text" name="deviceName" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备类型</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="deviceType">
                        <option value="" >请选择类型</option>
                        <option  value="电子设备">电子设备</option>
                        <option value="非电子设备">非电子设备</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备状态</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="deviceStatus">
                        <option value="">请选择状态</option>
                        <option value="1" >在库</option>
                        <option value="2">报废</option>
                        <option value="2">借出</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">登记时间</label>
            <div class="layui-input-block">
                <input type="date"  name="deviceDate"  class="layui-input"></input>
                <!--<input type="text" name="deviceDate"  class="layui-input">-->
            </div>
        </div>


        <!--提交按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="frmsub">确定新增</button>
            </div>
        </div>
    </form>
</div>

<!--查看弹出层-->
<div style="padding: 16px;display:none" id="popups02" >
    <form class="layui-form" action="" id="myform02" lay-filter="myform02">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备编号</label>
            <div class="layui-input-block">
                <input type="text" disabled name="deviceCoding" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备名称</label>
            <div class="layui-input-block">
                <input type="text" disabled name="deviceName" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备类型</label>
            <div class="layui-input-block">
                <select name="deviceType" disabled>
                    <option value="">设备类型</option>
                    <option value="电子设备" >电子设备</option>
                    <option value="非电子设备">非电子设备</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备状态</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="deviceStatus" disabled>
                        <option value="">请选择状态</option>
                        <option value="1" >在库</option>
                        <option value="2">报废</option>
                        <option value="3">借出</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">登记时间</label>
            <div class="layui-input-block">
                <input  disabled type="text" name="deviceDate"  class="layui-input">
            </div>
        </div>
        <!--提交按钮-->
        <!--<div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="frmsub">确定修改</button>
            </div>
        </div>-->
    </form>
</div>


<!--修改弹出层-->
<div style="padding: 16px;display:none" id="popups" >
    <form class="layui-form" action="" id="myform" lay-filter="myform">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label" style="width: auto">设备序号</label>
            <div class="layui-input-block">
                <input type="text" name="deviceId" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备编号</label>
            <div class="layui-input-block">
                <input type="text" name="deviceCoding" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备名称</label>
            <div class="layui-input-block">
                <input type="text" name="deviceName" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备类型</label>
            <div class="layui-input-block">
                <select name="deviceType">
                    <option value="">设备类型</option>
                    <option value="电子设备" >电子设备</option>
                    <option value="非电子设备">非电子设备</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">设备状态</label>
            <div class="layui-input-block">
                <div class="layui-input-inline">
                    <select name="deviceStatus">
                        <option value="">请选择状态</option>
                        <option value="1" >在库</option>
                        <option value="2">报废</option>
                        <option value="3">借出</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">登记时间</label>
            <div class="layui-input-block">
                <input type="date"  name="deviceDate"  class="layui-input"></input>
                <!--<input type="text" name="deviceDate"  class="layui-input">-->
            </div>
        </div>
        <!--提交按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="frmsub">确定修改</button>
            </div>
        </div>
    </form>
</div>


</body>
</html>